import React from 'react';
import { View, Text, ActivityIndicator, StyleSheet, ViewStyle, TextStyle } from 'react-native';
import theme from '../../styles/theme';

export type LoadingSize = 'small' | 'medium' | 'large';
export type LoadingType = 'spinner' | 'dots' | 'pulse';

interface LoadingIndicatorProps {
  isLoading: boolean;
  size?: LoadingSize;
  type?: LoadingType;
  color?: string;
  text?: string;
  textPosition?: 'top' | 'bottom' | 'left' | 'right';
  containerStyle?: ViewStyle;
  textStyle?: TextStyle;
  overlay?: boolean;
}

const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
  isLoading,
  size = 'medium',
  type = 'spinner',
  color = theme.colors.primary.main,
  text,
  textPosition = 'bottom',
  containerStyle,
  textStyle,
  overlay = false,
}) => {
  if (!isLoading) {
    return null;
  }

  // 转换 size 到 ActivityIndicator 的 size
  const getActivityIndicatorSize = (): 'small' | 'large' => {
    switch (size) {
      case 'small':
        return 'small';
      case 'large':
        return 'large';
      case 'medium':
      default:
        return 'small'; // React Native 默认只有 small 和 large
    }
  };

  // 获取自定义指示器的尺寸
  const getCustomIndicatorSize = (): number => {
    switch (size) {
      case 'small':
        return 16;
      case 'large':
        return 36;
      case 'medium':
      default:
        return 24;
    }
  };

  // 渲染指示器
  const renderIndicator = () => {
    switch (type) {
      case 'dots':
        return <DotsIndicator size={getCustomIndicatorSize()} color={color} />;
      case 'pulse':
        return <PulseIndicator size={getCustomIndicatorSize()} color={color} />;
      case 'spinner':
      default:
        return (
          <ActivityIndicator 
            size={getActivityIndicatorSize()} 
            color={color} 
          />
        );
    }
  };

  // 水平或垂直布局的容器样式
  const flexDirection = 
    textPosition === 'left' || textPosition === 'right' 
      ? 'row' 
      : 'column';
  
  // 调整文本与指示器的顺序
  const flexOrder = textPosition === 'top' || textPosition === 'left' ? 'reverse' : 'normal';

  return (
    <View 
      style={[
        styles.container,
        overlay && styles.overlay,
        { flexDirection: flexDirection === 'row' 
            ? flexOrder === 'normal' ? 'row' : 'row-reverse'
            : flexOrder === 'normal' ? 'column' : 'column-reverse' 
        },
        containerStyle
      ]}
    >
      {renderIndicator()}
      
      {text && (
        <Text 
          style={[
            styles.text, 
            { 
              marginLeft: textPosition === 'right' ? theme.spacing.sm : 0,
              marginRight: textPosition === 'left' ? theme.spacing.sm : 0,
              marginTop: textPosition === 'bottom' ? theme.spacing.sm : 0,
              marginBottom: textPosition === 'top' ? theme.spacing.sm : 0,
            },
            textStyle
          ]}
        >
          {text}
        </Text>
      )}
    </View>
  );
};

// 自定义点状加载指示器
const DotsIndicator: React.FC<{ size: number; color: string }> = ({ size, color }) => {
  const dotSize = size / 4;
  
  return (
    <View style={styles.dotsContainer}>
      <View style={[styles.dot, { width: dotSize, height: dotSize, backgroundColor: color }, styles.dot1]} />
      <View style={[styles.dot, { width: dotSize, height: dotSize, backgroundColor: color }, styles.dot2]} />
      <View style={[styles.dot, { width: dotSize, height: dotSize, backgroundColor: color }, styles.dot3]} />
    </View>
  );
};

// 自定义脉冲加载指示器
const PulseIndicator: React.FC<{ size: number; color: string }> = ({ size, color }) => {
  return (
    <View style={[styles.pulseContainer, { width: size, height: size }]}>
      <View style={[styles.pulse, { width: size, height: size, borderColor: color }]} />
      <View style={[styles.pulse, { width: size, height: size, borderColor: color }, styles.pulse2]} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: theme.spacing.md,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    zIndex: theme.zIndex.modal - 1,
  },
  text: {
    fontSize: theme.typography.fontSize.sm,
    color: theme.colors.text.secondary,
    textAlign: 'center',
  },
  // 点状加载器样式
  dotsContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  dot: {
    borderRadius: 50,
    marginHorizontal: 2,
  },
  dot1: {
    opacity: 0.3,
    animationName: 'dotPulse',
    animationDuration: '1s',
    animationIterationCount: 'infinite',
    animationDelay: '0s',
  },
  dot2: {
    opacity: 0.5,
    animationName: 'dotPulse',
    animationDuration: '1s',
    animationIterationCount: 'infinite',
    animationDelay: '0.2s',
  },
  dot3: {
    opacity: 0.7,
    animationName: 'dotPulse',
    animationDuration: '1s',
    animationIterationCount: 'infinite',
    animationDelay: '0.4s',
  },
  // 脉冲加载器样式
  pulseContainer: {
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
  },
  pulse: {
    position: 'absolute',
    borderWidth: 2,
    borderRadius: 50,
    borderStyle: 'solid',
    opacity: 0,
    animationName: 'pulse',
    animationDuration: '1.5s',
    animationIterationCount: 'infinite',
  },
  pulse2: {
    animationDelay: '0.5s',
  },
});

export default LoadingIndicator;